/**
 * 基础组件
 */

class Kwidget extends HTMLElement {
    constructor() {
        super();
        this.#initCss();
    }

    async #initCss() {
        let cssText = await this.loadCssText('./kWidget.css');
        const style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = cssText;
        document.head.appendChild(style);
    }

    registerEvent(evtType, callback) {
        try {
            this.addEventListener(evtType, callback);
        } catch (err) {
            throw new Error(`${evtType}事件注册失败`);
        }
    }

    parse(json) { 
        return JSON.parse(json);
    }

    stringify(json) {
        return JSON.stringify(json);
    }
    
    /**
     * 
     * @param {string} url css 文件地址
     * @returns cssText css字符串文本
     */
    async loadCssText(url) {
        let cssText = '';
        try {
            cssText = await (await fetch(url)).text();
        } catch (error) {
            throw new Error(error);
        }
        return cssText;
    }
    /**
     * 
     * @param {string} cssText css 字符串文本
     */
    initStyle(cssText) {
        const style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = cssText;
        this.shadowRoot.appendChild(style);

    }

    logInfo(text = "挂载") {
        console.log(`%c${text}`, 'color: green;border:1px solid rgba(103, 194, 58, 1);font-size: 12px; font-family: Alibaba PuHuiTi;  background-color: rgba(103, 194, 58, 0.3);padding: 4px 5px;border-radius: 3px;');
    }
}

export { Kwidget };